<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <AreaSelector>
        <el-form  :inline="true" class="demo-form-inline">
        <el-form-item label="省份">
          <el-select placeholder="请选择省份" @change="doGetCityList()" v-model="queryVoParam.provinceId" clearable >
            <el-option v-for="(province,index) in provinceList" 
                :value="province.id" :label="province.name" :key="province.id"/>
          </el-select>
      </el-form-item>
      <el-form-item label="城市">
        <el-select placeholder="请选择城市" @change="doGetDistrictList()" v-model="queryVoParam.cityId" clearable>
          <el-option v-for="(city,index) in cityList" :value="city.id" :label="city.name" :key="city.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="区域">
      <el-select placeholder="请选择区域"  v-model="queryVoParam.districtId" clearable >
        <el-option v-for="(district,index) in districtList" :value="district.id" 
        :label="district.name"  :key="district.id" />
      </el-select>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" plain @click="doGetApartmentList()" :icon="Search">搜索</el-button>
      <el-button type="waring" plain @click="resetData()" :icon="Delete">重置</el-button>
      </el-form-item>
      </el-form>
      
      </AreaSelector>

      <el-button type="primary" @click="pushAddVue()" :icon="Plus">新增公寓</el-button>

      <el-table :data="apartmentList" border stripe style="margin: 20px 0;">
        <el-table-column label="名称"  show-overflow-tooltip align="center" prop="name"></el-table-column>
        <el-table-column label="详细地址" show-overflow-tooltip align="center" prop="addressDetail"></el-table-column>
        <el-table-column label="空闲房间数" align="center" prop="freeRoomCount"></el-table-column>
        <el-table-column label="房间总数" align="center"  prop="totalRoomCount"></el-table-column>
        <el-table-column label="所属省份" align="center"  prop="provinceName"></el-table-column>
        <el-table-column label="所属城市" align="center"  prop="cityName"></el-table-column>
        <el-table-column label="所属区域" align="center"  prop="districtName"></el-table-column>
        <el-table-column label="联系方式" show-overflow-tooltip align="center" prop="phone" ></el-table-column>
        <el-table-column label="入住状态" align="center">
          <template v-slot="{row, $index }">
             <!-- tag -->
             <el-tag v-if="row.freeRoomCount>0" type="success">可入住</el-tag>
             <el-tag v-else type="danger">已满房</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center" >
          <template v-slot="{row, $index }">
              <el-switch
                v-model="row.isRelease"
                class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row, $index }">
            <el-button type="warning" :icon="Edit">修改</el-button>
            <el-button type="danger" @click="doRemove(row)" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="queryVoParam.current" v-model:page-size="queryVoParam.size" :page-sizes="[1, 2, 3, 4]"
        layout="prev,pager, next, jumper,->,sizes,total" :total="total" @current-change="doGetApartmentList()"
        @size-change="doGetApartmentList()" />

    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import { ref , onMounted } from "vue"
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import { ApartmentParamType,
         ApartmentData,
         PageResData,
         getApartmentList,
         removeApartmentById} from '@/api/apartmentManagement/apartment'         
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from 'vue-router'


let router = useRouter();
//----跳转到添加页面  
let pushAddVue =()=>{
  router.push('/apartmentManagement/apartmentManagement/addOrEditApartment');
} 

//---------展示省市区联动
import {
    type ProvinceType,
    type CityType,
    type DistrictType,
    getProvinceList,
    getCityList,
    getDistrictList
} from  '@/api/region/index'

//定义接收的响应式数据
let provinceList = ref<ProvinceType[]>([]);
let cityList = ref<CityType[]>([]);
let districtList = ref<DistrictType[]>([]);


//三个调用api的方法
//进入以后就调用
let doGetProvinceList = async()=>{
  let {code,data} = await getProvinceList();
  if(code==200){
    provinceList.value = data;
  }
}

//第一个change第二个调用
let doGetCityList = async()=>{
  //省份改成触发
  queryVoParam.value.cityId = null;
  queryVoParam.value.districtId = null;
  let {code,data} = await getCityList(queryVoParam.value.provinceId);
  if(code==200){
    cityList.value = data;
  }
}
//第二个change第三个调用
let doGetDistrictList = async()=>{
  queryVoParam.value.districtId = null;
  let {code,data} = await getDistrictList(queryVoParam.value.cityId);
  if(code==200){
    districtList.value = data;
  }
}

//重置
let resetData = ()=>{
  queryVoParam.value = {
    current:1,
    size:2,
    provinceId:null,
    cityId:null,
    districtId:null
  }
  doGetApartmentList();
}

const total = ref(2)

//--------------公寓列表展示
//1.导入依赖 api
//2.定义参数类型
let queryVoParam = ref<ApartmentParamType>({
    current:1,
    size:2,
    provinceId:null,
    cityId:null,
    districtId:null
})
//3.定义接收的响应式列表数据
let apartmentList = ref<ApartmentData[]>([]);
//4.调用查询公寓列表方法
let doGetApartmentList = async()=>{
   let {code,data} = await getApartmentList(queryVoParam.value);
   if(code == 200){
     apartmentList.value = data.records;
     total.value = data.total;
     //循环... [stream]
     apartmentList.value.map(item=>{
          item.isRelease = item.isRelease == 1;
          return item;
     });
   }
}


//删除公寓功能
let doRemove = (row:ApartmentData)=>{
    //row name id 
    ElMessageBox.confirm(
    `您是否要删除<${row.name}>公寓数据?`,
    '警告',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async() => {
      //1.删除的api方法
      await removeApartmentById(row.id as number);
      doGetApartmentList();
      ElMessage({
        type: 'success',
        message: '删除数据成功!!',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消数据删除!!',
      })
    })
}

onMounted(()=>{
  doGetApartmentList();
  doGetProvinceList();
});

</script>
